{% extends "./inc/base.html" %}
{% block content %}
<section>
    <div class="container">
        <div class="row bg1x1">
            <!-- LEFT -->
            {% include "./inc/user_left.html" %}
            <!-- RIGHT -->
            <div class="col-lg-10 col-md-10 col-sm-8">
                <h4 class="page-header margin-top-0"><i class="fa fa-reorder fa-lg text-default"></i>
                    {{controller.meta_title}}</h4>
                {# 会员信息 #}
                <table class="table table-bordered">
                    <tr>
                        <td colspan="2">会员信息</td>
                    </tr>
                    <tr>
                        <td>会员类型：{{groupInfo.name}}</td>
                        <td>到期时间: {{moment(memberInfo.overduedate).format('YYYY-M-D H:m:s')}}</td>
                    </tr>
                </table>
                {# 续费表单 #}
                <div class="row">
                    <form id="formMembership" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">选择时长类型</label>
                            <div class="col-sm-10">
                                <select id="timeTypeSelect" class="form-control" name="type" placeholder="请选择">
                                    <option value="">请选择</option>
                                    <option value="m">{{groupInfo.price_m}}元/月</option>
                                    <option value="y">{{groupInfo.price_y}}元/年</option>
                                    <option value="l">{{groupInfo.price_l}}元/永久</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">选择时长</label>
                            <div class="col-sm-10">
                                <select id="timeSelect" class="form-control" name="time" placeholder="请选择">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">价格</label>
                            <div class="col-sm-10">
                                <span class="text-danger form-control" id="showPrice">￥0.00</span>
                                <input style="display: none;" id="buyPrice" name="price" value=0 />
                            </div>
                        </div>
                        <button type="submit" class="btn btn-default col-md-4 col-md-offset-4">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block script %}
<script>
    var timeTypeSelect = $('#timeTypeSelect');
    var timeSelect = $('#timeSelect');
    var showPrice = $('#showPrice');
    var buyPrice = $('#buyPrice');
    timeTypeSelect.on('change', function () {
        var selectedIndex = this.selectedIndex;
        var value = $(this).val();
        var time;
        var unit;
        var htmlContent = '<option value="">请选择</option>';
        switch (value) {
            case 'l':
                time = 0;
                unit = '';
                break;
            case 'y':
                time = 10;
                unit = '年';
                break;
            case 'm':
                time = 12;
                unit = '月';
                break;
            default:
                time = 0;
                unit = '';
        }
        if (value === 'l') {
            timeSelect.attr('disabled', 'disabled');
            getPrice();
            return;
        } else {
            timeSelect.removeAttr('disabled');
        }
        for (var i = 1; i <= time; i++) {
            htmlContent += '<option value="' + i + '">' + i + unit + '</option>';
        }
        timeSelect.html(htmlContent);
        showPrice.html('￥0.00');
    });
    timeSelect.on('change', function () {
        getPrice();
    });
    function getPrice() {
        showPrice.html('正在计算价格...');
        $.ajax({
            url: '/center/account/renew?step=1',
            method: 'get',
            data: $('#formMembership').serialize(),
            dataType: 'json',
            success: function (res) {
                if (res.errno) {
                    _toastr(res.errmsg, 'top-right', 'error', false);
                    return;
                }
                showPrice.html('￥' + res.data + '元');
                buyPrice.val(res.data);
            },
            error: function (e) {
                _toastr('计算价格发生错误', 'top-right', 'error', false);
            }
        });
    }
    $('#formMembership').submit(function () {
        $.ajax({
            url: '/center/account/renew?step=2',
            method: 'get',
            data: $('#formMembership').serialize(),
            dataType: 'json',
            success: function (res) {
                if (res.errno) {
                    _toastr(res.errmsg, 'top-right', 'error', false);
                    return;
                }
                _toastr(res.data, 'top-right', 'success', false);
                setTimeout(function () {
                    window.location = '/center/index';
                }, 3000);
            },
            error: function (e) {
                _toastr('计算价格发生错误', 'top-right', 'error', false);
            }
        });
        return false;
    });
</script>
{% endblock %}